<template>
	<div id="priceIndex">
		<div class="banner">
			<div class="search">
				<li>
					<label>发货地:</label>
					<el-input placeholder="输入城市名" maxLength="12" clearable>
					</el-input>
				</li>
				<li>
					<label>发货地:</label>
					<el-input placeholder="输入到货地" maxLength="12" clearable>
					</el-input>
				</li>
				<li>
					<label>车型:</label>
					<el-input placeholder="选择车型" maxLength="12" clearable>
					</el-input>
				</li>

				<div class="search-click my-flex-center my-btn">
					<span>搜索</span>
				</div>

			</div>
		</div>

		<div class="publish">
			<li class="name">
				<span class="title">当前货源</span>
				<span @click="changeRouter('goods')" class="more hover">更多>></span>
			</li>
			<div class="info">
				<div class="left">
					<div class="type">
						<div class="title my-flex-center">热门货源地</div>
						<div class="type-list">
							<li>
								<template v-for="(item,index) of 10">
									<div class="one-row" v-if="index%3==0">北京市</div>
								</template>
							</li>

							<li>
								<template v-for="(item,index) of 10">
									<div class="one-row" v-if="index%3==1">上海市</div>
								</template>
							</li>

							<li class="one-row">
								<template v-for="(item,index) of 10">
									<div class="one-row" v-if="index%3==2">深圳市</div>
								</template>
							</li>
						</div>
					</div>

					<div class="type">
						<div class="title my-flex-center">货物种类</div>
						<div class="type-list">
							<li>
								<template v-for="(item,index) of 10">
									<div class="one-row" v-if="index%3==0">汽油</div>
								</template>
							</li>

							<li>
								<template v-for="(item,index) of 10">
									<div class="one-row" v-if="index%3==1">天气</div>
								</template>
							</li>

							<li class="one-row">
								<template v-for="(item,index) of 10">
									<div class="one-row" v-if="index%3==2">乙烷</div>
								</template>
							</li>
						</div>
					</div>
				</div>
				<div class="right">
					<table cellspacing="" cellpadding="" class="my-table">
						<tr>
							<th>货主</th>
							<th>出发/到达</th>
							<th>价格</th>
							<th>发布时间</th>
							<th>操作</th>
						</tr>
						<tr v-for="item of 6">
							<td class="name">
								<div class="my-flex-center">
									<div class="img"></div>
									<div class="name1">
										<div>东明石化有限公司</div>
										<el-rate disabled text-color="#ff9900" :value="3.5" score-template="{value}">
										</el-rate>
									</div>
								</div>

							</td>
							<td class="arrive">
								<div class="my-flex-center">
									<span>南京市</span>
									<div class="my-flex-col-center">
										<span>汽油,30吨</span>
										<img src="../../assets/wuliu/arrow.png" alt="" />
										<span>装货日期:2019-04-18</span>
									</div>
									<span>衡阳市</span>
								</div>
							</td>
							<td class="price text-center">
								竞价
							</td>
							<td class="time text-center">
								一天前
							</td>
							<td class="operate text-center">
								查看详情
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>

		<div class="publish">
			<li class="name">
				<span class="title">当前车源</span>
				<span class="more hover">更多>></span>
			</li>
			<div class="car-info">
				
				<div v-for="item of 12">
					<div class="card my-flex-center" >
						<span>南京市</span>
						<div class="my-flex-col-center">
							<span>30吨</span>
							<img src="../../assets/wuliu/arrow.png" alt="" />
							<span>2019-12-09 发车</span>
						</div>
						<span>衡阳市</span>
					</div>
					<div class="type">
						<span>高栏车</span>
					</div>
					<div class="detail">
						<span>车主:张三 / 车牌:粤BF251A</span>
					</div>
					
				</div>
				
				
			</div>
		</div>

		<!--<div class="publish my-flex-left">
			<li>发布货源</li>
			<li class="active">发布车源</li>
		</div>-->

	</div>
</template>

<script>
	import { mapState } from "vuex";
	import service from '@/js/services/price';
	export default {
		inject: ['reload', 'closeLoading', 'openLoading','changeRouter'],
		data() {
			return {
				banner: [],
				treeDate: [],
				exchangeRate: {},
				latestPrices: [],
				types: [],
				pageParams: {
					pageNum: 1,
					pageSize: 3
				},
				total: 1,
				infoList: [],
				form: {},
				imgs: [
					require('../../assets/price/1.png'),
					require('../../assets/price/2.png'),
					require('../../assets/price/3.png'),
					require('../../assets/price/4.png'),
					require('../../assets/price/5.png'),
					require('../../assets/price/6.png'),
					require('../../assets/price/7.png'),
				],
				labelPostitin: 'top',
				center: {
					lng: 0,
					lat: 0
				},
				zoom: [],
				biaozhi: {
					code1: '去程',
					code2: '返程'
				},
				biaozhi2: [{
					name: '去程',
					value: 'code1'
				}]
			}
		},
		created() {
			this.searchCondition = this.tool.cloneObj(service.searchCondition);
		},
		mounted() {
			this.latestPrice();
			this.categoryTree();
			this.noticeNoticePage();
			this.getBanner();
			setTimeout(() => {
				this.zoom = []
			}, 1000)
		},
		activated() {

		},
		destroyed() {

		},
		filters: {

		},
		watch: {

		},
		methods: {
			...service,
			changePage(val) {
				let page = this.pageParams.pageNum + val;
				if(page < 1 || page > Math.ceil(this.total / 3)) {
					return;
				}
				this.pageParams.pageNum += val;
				this.noticeNoticePage();
			},
			toPriceType(item, index) {
				let arr = [];
				if(index < 4) {
					arr.push(Math.floor(index / 2) + 1)
				}
				arr.push(item.id)
				let obj = {
					name: item.name,
					id: arr
				}

				let url = '/priceType?obj=' + JSON.stringify(obj);
				this.$router.push(url);
			},
			getYearMonth(val) {
				let arr = val.split(' ')[0].split('-');

				let html = `${arr[1]}/<small>${arr[0]}</small>`

				return html;
			},
			async goMark(url, id) {

				let userInfo = this.$store.state.userInfo;
				if(userInfo && userInfo.id && userInfo.type == 0) {
					let options = {
						content: '您还没有权限,请升级为企业买家，去升级吗?',
						yesText: '去升级',
						noText: '再想想',
					}
					this.$confirm('您还没有权限,请升级为企业买家，去升级吗?', '提示', {
						confirmButtonText: '去升级',
						cancelButtonText: '再想想',
						type: 'warning'
					}).then(() => {
						this.$router.push('/update');
					}).catch(() => {})
					return;
				}
				await this.hasPermission(5);
				this.$router.push({
					path: url
				});
			}
		}
	}
</script>

<style lang="less" scoped="scoped" src="../../less/page/price/index.less"></style>